import { useEffect, useState, useRef } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { NavBar, Card, Image, Popup, Button } from "antd-mobile";
import http from "../../axios/request.js";
import styles from "./Detail.module.css";
import { CartO, ChatO } from "@react-vant/icons";
import { ActionBar } from "react-vant";
import { HeartFill } from "antd-mobile-icons";
import AMapLoader from "@amap/amap-jsapi-loader";
const Index = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  const [detailItem, setDetailItem] = useState({});
  const [visible1, setVisible1] = useState(false);
  const map = useRef(null);
  const [sessions, setSessions] = useState([
    {
      title: "2023-05-18 星期一 19:00",
      status: false,
    },
    {
      title: "2023-05-19 星期二 19:00",
      status: true,
    },
    {
      title: "2023-05-20 星期周三 19:00",
      status: true,
    },
  ]);

  //获取详情页数据
  const getList = async () => {
    const res = await http.get("/api/list/detail", { params: { id } });
    const { data } = res.data;
    setDetailItem(data);
  };

  useEffect(() => {
    getList();
  }, []);
  const [collectList, setCollectList] = useState(
    JSON.parse(localStorage.getItem("collectList") || "[]")
  );
//收藏
  const handelColl = (item) => {
    const itemFlag = collectList.some((it) => it.id === item.id);

    if (itemFlag) {
      //取消收藏
      const newCollList = collectList.filter((it) => it.id !== item.id);
      setCollectList(newCollList);
      localStorage.setItem("collectList", JSON.stringify(newCollList));
    } else {
      //添加到收藏列表
      setCollectList([...collectList, item]);
      localStorage.setItem(
        "collectList",
        JSON.stringify([...collectList, item])
      );
    }
  };
  useEffect(() => {
    AMapLoader.load({
      key: "36f7db7ea1937c96cadd31a7ca67fa93", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map.current = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.29, 39.44], // 初始化地图中心点位置
        });

        const marker = new AMap.Marker({
          position: new AMap.LngLat(116.29, 39.44),
          label: {
            content: `<div class="markpos"><span>在这</span></div>`,
            offset: new AMap.Pixel(-40, 0),
          },
        });

        map.current.add(marker);
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      if (map.current) {
        map.current.destroy();
      }
    };
  }, []);

  if (!detailItem.id) {
    return <div>数据加载中...</div>;
  }

  return (
    <div>
      <NavBar
        onBack={() => navigate("/")}
        right={
          <HeartFill
            color={
              collectList.some((it) => it.id === detailItem.id)
                ? "orangered"
                : "#666"
            }
            onClick={() => handelColl(detailItem)}
            fontSize={26}
          />
        }
      >
        详情
      </NavBar>
      <div
        id="container"
        className={styles.container}
        style={{ height: "300px" }}
      ></div>
      <Card>
        <Image
          fit="cover"
          style={{ borderRadius: 8, height: 230, background: "#f2f2f2" }}
          src={detailItem.image}
        ></Image>
      </Card>
      <div className={styles.card_bottom}>
        <div className={styles.bot_topinner}>
          <h3>{detailItem.title}</h3>
          <dl>
            <dt>
              <img src={detailItem.image}></img>
            </dt>
            <dd>{detailItem.title}</dd>
          </dl>
        </div>
        <span className={styles.priceEl}>¥{detailItem.price}</span>
      </div>
      <div className="demo-action-bar">
        <ActionBar>
          <ActionBar.Icon
            icon={<ChatO />}
            text="客服"
            onClick={() => console.log("chat click")}
          />
          <ActionBar.Icon
            icon={<CartO />}
            text="首页"
            onClick={() => console.log("cart click")}
          />
          <ActionBar.Button
            type="danger"
            text="选座购票"
            onClick={() => navigate("/selseat", { state: detailItem })}
          />
        </ActionBar>

        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false);
          }}
          onClose={() => {
            setVisible1(false);
          }}
          showCloseButton={true}
        >
          <div>
            {sessions.map((item, ind) => (
              <p className={styles.selItem} key={ind}>
                {item.title}{" "}
                {!item.status ? <Button disabled={true}>票品售完</Button> : ""}
              </p>
            ))}
          </div>
          <div></div>

          <div
            className={styles.d_btn}
            
          >
            立即预定
          </div>
        </Popup>
      </div>
    </div>
  );
};

export default Index;
